<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Coins game</title>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
.btn.myinvoked {
   border: 3px solid #0064CD;
   color: #0064CD;
}
</style>
<script type="text/javascript">
	function setBalanceToWalletDiv(balance) {
		$('#wallet').html(balance);
	}

	// game try

	function ajaxSendToPlayer(coinSide, obj) {
		$(obj).addClass("myinvoked");
		$(obj).attr('disabled', 'true');

		$.getJSON("/rest/coins" + "?coinSide=" + coinSide,
				function ajaxSuccess(data, textStatus) {
			      // print data:
					// $('<p>data = ' + JSON.stringify(data) + ', textStatus = ' + textStatus + '</p>').appendTo('body');
					setBalanceToWalletDiv(data.balanceAfterChange);
					if (data.randomCoinSide == coinSide) {
						// win
						$('#gameresult').html("WIN!").css("color", "green");
					} else {
						// lose
						$('#gameresult').html("Lose").css("color", "red");
					}
					$('.myinvoked').removeAttr('disabled');
					$('.myinvoked').removeClass("myinvoked");
				});
	}

	// Need more money

	function ajaxSuccessNeedMoreMoney(data, textStatus) {
		setBalanceToWalletDiv(data);
		$('.myinvoked').removeAttr('disabled');
		$('.myinvoked').removeClass("myinvoked");
	}

	function ajaxSendNeedMoreMoney(obj) {
		$(obj).addClass("myinvoked");
		$(obj).attr('disabled', 'true');

		$.getJSON("/rest/coins/payment", ajaxSuccessNeedMoreMoney);
	}

	// I'm lucky, send 20 requests to the server 
	function iAmLucky(obj) {
		for ( var i = 0; i < 20; i++) {
			ajaxSendToPlayer(0, obj);
		}
	}

	function ajaxSuccessGetBalance(data, textStatus) {
		setBalanceToWalletDiv(data);
	}

	function ajaxSendGetBalance() {
		$.getJSON("/rest/coins/balance", ajaxSuccessGetBalance);
	}

	// get balance on load
	ajaxSendGetBalance();

	// implement JSON.stringify serialization
	JSON.stringify = JSON.stringify || function(obj) {
		var t = typeof (obj);
		if (t != "object" || obj === null) {
			// simple data type
			if (t == "string")
				obj = '"' + obj + '"';
			return String(obj);
		} else {
			// recurse array or object
			var n, v, json = [], arr = (obj && obj.constructor == Array);
			for (n in obj) {
				v = obj[n];
				t = typeof (v);
				if (t == "string")
					v = '"' + v + '"';
				else if (t == "object" && v !== null)
					v = JSON.stringify(v);
				json.push((arr ? "" : '"' + n + '":') + String(v));
			}
			return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
		}
	};
</script>


</head>
<body>



   <center>
      <br />
      <div class="alert-message success"
         style="width: 50%; height: 23px">
         <p style="font-size: large;">
            <strong>Welcome</strong> to the coins game.
         </p>
      </div>
      <br />
      <p style="font-size: medium;">Guess a coin side</p>
      <img alt="Two coin sides: obverse and reverse"
         src='images/hryvnia-Ukraine.JPG'></img> <br /> <br />
      <div id="game" style="width: 50%; height: 30%">
         <button id="button1" type="button" class="btn large"
            onClick="ajaxSendToPlayer(0,this);">Obverse</button>
         <button id="button2" type="button" class="btn large"
            onClick="ajaxSendToPlayer(1,this);">Reverse</button>
         <br /> <br /> <br />
         <b><p id="gameresult"
               style="font-size: x-large;"></p></b>
      </div>
      <div id="wallet_div" style="width: 50%; height: 30%">
         <div class="alert-message success"
            style="width: 15%; height: 10%">
            <p style="font-size: large;">
               <strong id="wallet">0</strong>
            </p>
         </div>
         <br /> <br />
         <input id="button_money" type="button" class="btn"
            value="Need more money" name="button"
            onClick="ajaxSendNeedMoreMoney(this)"> 
      </div>
      <div id="lucky_div" style="width: 50%; height: 10%">
         <input id="button_lucky" type="button" class="btn"
            value="I am lucky today" name="button"
            onClick="iAmLucky(this)"> <br /> 
            20 iterations
      </div>
   </center>
</body>
</html>